<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jsWebControl-1.0.0.min.js"></script>
    <script src="hk.js"></script>
    <style>
        html,
        body {
            height: 100%;
        }

        .index-content {
            height: 1000px;
        }

        #play {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 800px;
            height: 550px;
        }
    </style>
</head>

<body>
    <div class="index-content">

        <div id='play'></div>

    </div>
</body>
<script>
    let control = null;

    hk({
        id: "play",
        info: {
            appkey: "平台提供的 APPKey",
            ip: "平台（Nginx）IP 地址",
            port: 0, //平台端口
            secret: "平台提供的 APPSecret",
            layout: "1x1"
        },
        callback(e) {
            console.log(e);
        }
    }).then(async (res) => {
        control = res;

        //获取页面布局
        let layout = await control.getLayout();
        console.log(layout);

        //播放一个视频
        // control.play("监控点编号")

        //设置布局
        control.setLayout("1x2");

        //播放多个视频
        control.play([
            {
                cameraIndexCode: '监控点编号',
                wndId: 1
            },
            {
                cameraIndexCode: '监控点编号',
                wndId: 2
            }
        ]);

        //停止播放
        control.stop([1]);

        //解决自适应和滚动屏幕至顶的问题
        window.onresize = function () {
            control.adaptive();
        }

        document.body.onscroll = function () {
            control.adaptive();
        }


    }).catch(err => {
        console.log(err);
    })






</script>

</html>